<template>
  <el-menu :default-active="route.path" router>
    <el-sub-menu v-for="item in menus" :key="item.path" :index="item.path">
      <template #title>
        <el-icon>
          <component :is="item.meta?.icon"></component>
        </el-icon>
        <span>{{ item.meta?.title }}</span>
      </template>
      <el-menu-item v-for="itemChild in item.children" :key="item.path + itemChild.path"
        :index="item.path + itemChild.path">
        <el-icon>
          <component :is="itemChild.meta?.icon"></component>
        </el-icon>
        <span>{{ itemChild.meta?.title }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import type { RouteRecordRaw, RouteRecordName } from 'vue-router'
import { defineComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import _ from 'loadsh'
import { useStore } from '@/store'

defineComponent({
  name: 'AsideView'
})
const router = useRouter()
const store = useStore()
const route = useRoute()

const permission = store.state.users.infos.permission
const menus = _.cloneDeep(router.options.routes).filter((v: RouteRecordRaw) => {
  v.children = v.children?.filter((v) => {
    return v.meta?.menu && (permission as (RouteRecordName | undefined)[]).includes(v.name)
  })
  return v.meta?.menu && (permission as (RouteRecordName | undefined)[]).includes(v.name)
})
</script>

<style scoped lang="scss">
.el-menu {
  height: calc(100vh - 60px);
  border: none;
  padding-top: 30px;
}

.el-menu-item.is-active {
  background: #e6f7ff;
  border-right: 3px solid #1890ff;
}
</style>